<template>
  <div class="song-list">
    <ul>
      <li class="list-item" v-for="(item, index) of songs" :key="item.id" @click="handleSelecte(item, index)">
        <div class="rank" v-show="rank">
          <span :class="getRanCls(index)" v-text="getRankText(index)"></span>
        </div>
        <div class="content">
          <h2 class="item-title">{{item.name}}</h2>
          <p class="item-desc">{{item.singer}} . {{item.album}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'SongList',
  props: {
    songs: {
      type: Array,
      default: () => []
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  methods: {
    handleSelecte (item, index) {
      this.$emit('select', item, index)
    },
    getRanCls (index) {
      if (index <= 2) {
        return `icon icon${index}`
      } else {
        return `text`
      }
    },
    getRankText (index) {
      if (index > 2) {
        return index + 1
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
@import 'common/scss/mixin.scss';
.song-list{
  ul{
    padding: 0.4rem 0.6rem;
    box-sizing: border-box;
    .list-item{
      display: flex;
      align-items: center;
      font-size: 0.28rem;
      height: 1.28rem;
      width: 100%;
      .rank{
        width: 0.5rem;
        margin-right: 0.6rem;
        text-align: center;
        .icon{
          display: inline-block;
          width: 0.5rem;
          height: 0.48rem;
          background-size: 0.5rem 0.48rem;
          &.icon0{
            @include bg-image('first');
          }
          &.icon1{
            @include bg-image('second');
          }
          &.icon2{
            @include bg-image('third');
          }
        }
        .text{
          color: $color-theme;
          font-size: $font-size-medium;
        }
      }
      .content{
        flex: 1;
        line-height: 0.4rem;
        width: 100%;
        .item-title{
          white-space: nowrap;
          color: $color-text;
          width: 95%;
          @include ellipse()
        }
        .item-desc{
          white-space: nowrap;
          width: 95%;
          color: $color-text-d;
          margin-top: 0.08rem;
          @include ellipse()
        }
      }
    }
  }
}
</style>
